﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MapShow.aspx.cs" Inherits="Map_MapShow" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 625px;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <link rel="stylesheet" id="skinCss" type="text/css" href="../css/default/easyui.css" />
    <script src="../ScriptFile/jquery.js"></script>
    <script type="text/javascript" src="../ScriptFile/jquery.easyui.min.js"></script>
    <%--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YxSfWLLHbFbfdVglmNwNqAdHjPAwLXL6"></script>--%>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <!--加载鼠标绘制工具-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <!--加载检索信息窗口-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
    <title>地图展示</title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="allmap" style="overflow: hidden; zoom: 1; position: relative;">
            <div id="map" style="height: 100%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;"></div>
            <div id="searchResultPanel" style="border: 1px solid #C0C0C0; width: 150px; height: auto; display: none;"></div>
        </div>
        <div id="dlgConfig" class="easyui-window" title="信息查看" closed="true" modal="true"
            minimizable="false" style="background: #fafafa; overflow: hidden;">
            <iframe id="iframeConfig" scrolling="no" frameborder="0" src="" style="width: 100%; height: 100%;"></iframe>
        </div>
        <script type="text/javascript">
            // 百度地图API功能
            var map = new BMap.Map('map');
            map.addControl(new BMap.NavigationControl());
            map.addControl(new BMap.MapTypeControl());
            //map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP] }));
            var centerPoint = '<%=ConfigurationManager.AppSettings["CenterPoint"] %>';
            var cPoint = centerPoint.split(',');
            var poi = new BMap.Point(cPoint[0], cPoint[1]);
            map.centerAndZoom(poi, 15);
            map.enableScrollWheelZoom(true);
            var isAdmin = '<%=IsAdmin %>';
            var labelX, labelY = "";
            var overlays = [];
            //回调获得覆盖物信息
            var overlaycomplete = function (e) {
                overlays.push(e.overlay);
                var pointCollect;
                var dialogHeight = 250;
                switch (e.drawingMode) {
                    case "marker":
                        pointCollect = e.overlay.getPosition().lng + ',' + e.overlay.getPosition().lat;
                        break;
                    case "polygon":
                        dialogHeight = 400;
                        pointCollect = getPointCollection();
                        break;
                    default:
                        pointCollect = getPointCollection();
                        break;
                }
                var p;
                if (pointCollect.split('|').length == 0) {
                    p = new BMap.Point(e.overlay.getPosition().lng, e.overlay.getPosition().lat);
                }
                else {
                    var point = pointCollect.substring(pointCollect.lastIndexOf('|') + 1);
                    var arrPoint = point.split(',');
                    p = new BMap.Point(arrPoint[0], arrPoint[1]);
                }
                openDivDlg("数据录入", "MarkInfo.aspx?drwingMode=" + e.drawingMode + "&point=" + escape(pointCollect) + "&markAttr=" + e.drawingMode, 400, dialogHeight, e.overlay, p);
            };

            map.addEventListener("mousemove", function (e) {
                window.status = e.point.lng + " , " + e.point.lat;
            });

            var styleOptions = {
                strokeColor: "red",    //边线颜色。
                fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
                strokeWeight: 3,       //边线的宽度，以像素为单位。
                strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
                fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
                strokeStyle: 'solid' //边线的样式，solid或dashed。
            };

            if (isAdmin == "True") {
                //实例化鼠标绘制工具
                var drawingManager = new BMapLib.DrawingManager(map, {
                    isOpen: false, //是否开启绘制模式
                    enableDrawingTool: true, //是否显示工具栏
                    drawingToolOptions: {
                        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                        offset: new BMap.Size(140, 5), //偏离值
                        drawingModes: [BMAP_DRAWING_MARKER, BMAP_DRAWING_POLYLINE, BMAP_DRAWING_POLYGON]
                    },
                    circleOptions: styleOptions, //圆的样式
                    polylineOptions: styleOptions, //线的样式
                    polygonOptions: styleOptions, //多边形的样式
                    rectangleOptions: styleOptions //矩形的样式
                });
                //添加鼠标绘制工具监听事件，用于获取绘制结果
                drawingManager.addEventListener('overlaycomplete', overlaycomplete);
            }

            function clearAll() {
                for (var i = 0; i < overlays.length; i++) {
                    map.removeOverlay(overlays[i]);
                }
                overlays.length = 0;
            }

            function getPointCollection() {
                var result = "";
                $.map(overlays, function (overlay) {
                    $.map(overlay.getPath(), function (point) {
                        result += point.lng + "," + point.lat + "|";
                    });
                });
                return result.substring(0, result.length - 1);
            }

            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            }

            function loadMapOverlay() {
                var flag = getUrlParam("flag");
                $.post("Ashx/LoadMapHandler.ashx", { "flag": flag }, function (data, status) {
                    addPolygon(data);
                    theLocation();
                });
            }

            function addPolygon(data) {
                var jsonObj = jQuery.parseJSON(data);
                $.each(jsonObj.OverlayList, function (index, item) {
                    var overlayArr = [];
                    var purpose = item.Purpose;
                    var formId = item.FormId;
                    var pointX = "";
                    var pointY = "";
                    $.each(item.PointList, function (idx, obj) {
                        pointX = obj.X;
                        pointY = obj.Y;
                        overlayArr.push(new BMap.Point(pointX, pointY));
                    });
                    var oveylay;
                    switch (item.Markattr) {
                        case "marker":
                            oveylay = new BMap.Marker(new BMap.Point(pointX, pointY));
                            break;
                        case "polyline":
                            oveylay = new BMap.Polyline(overlayArr, { strokeColor: "#ff0000", strokeWeight: 3, strokeOpacity: 0.5 });
                            break;
                        case "polygon":
                            oveylay = new BMap.Polygon(overlayArr, { strokeColor: "#ff0000", strokeWeight: 2 });
                            break;
                    }
                    map.addOverlay(oveylay);
                    var p = new BMap.Point(pointX, pointY);
                    var label = new BMap.Label(item.BdcName, { position: p });
                    addEvent(oveylay, label, item.XmIID, item.DataType, item.FormId, item.BdcId, isAdmin, markerClickHandler);
                });
            }

            var removeMarker = function (bdcid, e, ee, marker) {
                $.post("Ashx/MapHandler.ashx?action=Delete&bdcId=" + bdcid, function (data, status) {
                    if (data == "删除成功") {
                        map.removeOverlay(marker);
                    } else {
                        alert(data);
                    }
                });
            };

            function addEvent(oveylay, labelArr, xmiid, dataType, formId, bdcid, isAdmin, clickHandler) {
                oveylay.addEventListener('mouseover', function () { map.addOverlay(labelArr); });
                oveylay.addEventListener('mouseout', function () { map.removeOverlay(labelArr); });
                if (clickHandler) {
                    oveylay.addEventListener('click', function (e) {
                        clickHandler(e, bdcid, xmiid, dataType, formId);
                    });
                    if (isAdmin == "True") {
                        //创建右键菜单
                        var markerMenu = new BMap.ContextMenu();
                        markerMenu.addItem(new BMap.MenuItem('删除', removeMarker.bind(oveylay, bdcid)));
                        oveylay.addContextMenu(markerMenu);
                    }
                }
            }

            function addLabelAndEvent(overlay, labelPosition, name, iid, formId, bdcId) {
                var label = new BMap.Label(name, { position: labelPosition });
                addEvent(overlay, label, iid, "", formId, bdcId, isAdmin, markerClickHandler);
                overlays = [];
            }

            var sonObj = new Object();
            //关闭窗口
            function closeDivDlg(sonObj) {
                this.sonObj = sonObj;
                $('#dlgConfig').window('close');
            }

            //打开内嵌网页的通用方法1（window）
            function openDivDlg(strTitle, strUrl, divWidth, divHeight, overlay, labelPosition) {
                $('#dlgConfig').window({
                    title: strTitle, width: divWidth, height: divHeight,
                    collapsible: false, maximizable: true, maximized: true,
                    left: ($(window).width() - divWidth) / 2,
                    top: ($(window).height() - divHeight) / 2,
                    onClose: function () {
                        if (sonObj.isClose == "Close" || typeof (sonObj.isClose) == "undefined") {
                            clearAll();
                        } else {
                            addLabelAndEvent(overlay, labelPosition, sonObj.name, sonObj.xmiid, sonObj.formId, sonObj.bdcId);
                        }
                    }
                });
                $('#iframeConfig').attr("src", strUrl);
                $('#dlgConfig').window('open');
            }

            function markerClickHandler(e, bdcid, xmiid, dataType, formId) {
                var url = window.location.protocol + "//" + window.location.host + "<%=NetoWsPath%>" + "?readonly=true&FormName=" + formId + "&iid=" + xmiid;
                window.open(url, window);
            }

            // 用经纬度设置地图中心点
            function theLocation() {
                var mapid = getUrlParam("mapid");
                if (mapid) {
                    $.get("Ashx/GetOverlayHandler.ashx?mapid=" + mapid, function (data, status) {
                        var jsonObj = $.parseJSON(data);
                        $.each(jsonObj.OverlayList, function (index, item) {
                            var overlayArr = [];
                            var pointX = "";
                            var pointY = "";
                            $.each(item.PointList, function (idx, obj) {
                                pointX = obj.X;
                                pointY = obj.Y;
                                overlayArr.push(new BMap.Point(pointX, pointY));
                            });
                            var oveylay;
                            switch (item.Markattr) {
                                case "marker":
                                    oveylay = new BMap.Marker(new BMap.Point(pointX, pointY));
                                    break;
                                case "polyline":
                                    oveylay = new BMap.Polyline(overlayArr, { strokeColor: "#ff0000", strokeWeight: 3, strokeOpacity: 0.5 });
                                    break;
                                case "polygon":
                                    oveylay = new BMap.Polygon(overlayArr, { strokeColor: "#ff0000", strokeWeight: 2, fillOpacity: 1 });
                                    //, fillColor: "orange"
                                    break;
                            }
                            map.addOverlay(oveylay);
                            var p = new BMap.Point(pointX, pointY);
                            var label = new BMap.Label(item.BdcName, { position: p });
                            addEvent(oveylay, label, item.XmIID, item.DataType, item.FormId, item.BdcId, isAdmin, markerClickHandler);
                            var isChange = false;
                            var setStrokeColor = window.setInterval(function () {
                                if (isChange) {
                                    oveylay.setStrokeColor("blue");
                                    isChange = false;
                                }
                                else {
                                    oveylay.setStrokeColor("red");
                                    isChange = true;
                                }
                            }, 200);
                            
                            window.setTimeout(function () {
                                window.clearInterval(setStrokeColor);
                                oveylay.setStrokeColor("red");
                                map.removeOverlay(oveylay);
                            }, 2000);
                            var newPoint = new BMap.Point(pointX, pointY);
                            map.panTo(newPoint);
                            //map.zoomIn();
                        });
                    });
                }
            }
            
            //******搜索功能******
            function G(id) {
                return document.getElementById(id);
            }

            var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                {
                    "input": "suggestId"
                    , "location": map
                });

            ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
                var str = "";
                var _value = e.fromitem.value;
                var value = "";
                if (e.fromitem.index > -1) {
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                value = "";
                if (e.toitem.index > -1) {
                    _value = e.toitem.value;
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                G("searchResultPanel").innerHTML = str;
            });

            var myValue;
            ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                setPlace();
            });

            function setPlace() {
                map.clearOverlays();    //清除地图上所有覆盖物
                function myFun() {
                    var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                    map.centerAndZoom(pp, 18);
                    map.addOverlay(new BMap.Marker(pp));    //添加标注
                }
                var local = new BMap.LocalSearch(map, { //智能搜索
                    onSearchComplete: myFun
                });
                local.search(myValue);
            }

            // 定义一个控件类,即function
            function ZoomControl() {
                // 默认停靠位置和偏移量
                this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
                this.defaultOffset = new BMap.Size(200, 5);
            }

            // 通过JavaScript的prototype属性继承于BMap.Control
            ZoomControl.prototype = new BMap.Control();

            // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
            // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
            ZoomControl.prototype.initialize = function (map) {
                // 创建一个DOM元素
                var input = document.createElement("input");
                input.style.width = "400px";
                input.style.height = "30px";
                input.id = "suggestId";
                input.className = "form-control";
                input.placeholder = "请输入要搜索的内容";
                input.style.fontSize = "20px";
                map.getContainer().appendChild(input);

                // 将DOM元素返回
                return input;
            };
            // 创建控件
            var myZoomCtrl = new ZoomControl();
            // 添加到地图当中
            map.addControl(myZoomCtrl);

            $(function () {
                loadMapOverlay();
                for (var i = 0; i < mapOverlay.length; i++) {
                    var vv = mapOverlay[i];
                }
                $("body,#allmap").height($(document).height());
            });
        </script>
    </form>
</body>
</html>
